<script setup lang="ts">
  import { computed } from 'vue'
  import { type PopoverPlacement, NTooltip } from 'naive-ui'
  // import { NTooltip } from 'naive-ui'
  import Button from './Button.vue'

  interface Props {
    tooltip?: string
    placement?: PopoverPlacement
  }

  interface Emit {
    (e: 'click'): void
  }

  const props = withDefaults(defineProps<Props>(), {
    tooltip: '',
    placement: 'bottom',
  })

  const emit = defineEmits<Emit>()

  const showTooltip = computed(() => Boolean(props.tooltip))

  function handleClick() {
    emit('click')
  }
</script>

<template>
  <div v-if="showTooltip">
    <NTooltip :placement="placement" trigger="hover">
      <template #trigger>
        <Button @click="handleClick">
          <slot />
        </Button>
      </template>
      {{ tooltip }}
    </NTooltip>
  </div>
  <div v-else>
    <Button @click="handleClick">
      <slot />
    </Button>
  </div>
</template>
